<template>
	<div class="wraper" :class="{padTop:isIphoneX,iphone:isIphone,'theme-dark':themeIndex==1}">
		<div class="line"></div>
		<div class="nav-bar">
			<div class="arrow" @click="goBack"></div>
			<div class="center"></div>
			<div class="right"></div>
		</div>
		<div class="content">
			<h1>{{$t('apply-key47')}}</h1>
			<p class="info" v-if="isSuccess===3">{{$t('apply-key48')}}{{infoEmail}}</p>
			<!-- 姓名 -->
			<div class="item name">
				<div class="label">{{$t('apply-key49')}}</div>
				<div class="input">
					<input @blur="scrollTop" type="text" v-model="name" :placeholder="$t('apply-key50')">
				</div>
			</div>
			<!-- 居住国家 -->
			<div class="item" @click="countryShown=true;">
				<div class="label">{{$t('apply-key51')}}</div>
				<div class="input">{{countryName}}<span class="arrow" :class="{up:countryShown}"></span></div>
			</div>
			<!-- 邮箱 (用于接收审核结果） -->
			<div class="item" :class="{hidden:!enableModifyEmail}">
				<div class="label">{{$t('apply-key52')}}</div>
				<div class="input">
					<input @blur="scrollTop" type="text" :disabled="!enableModifyEmail" v-model="email" :placeholder="$t('apply-key53')">
				</div>
			</div>
			<!-- 邮箱验证码 -->
			<div class="item" :class="{hidden:!enableModifyEmail}">
				<div class="label">{{$t('apply-key54')}}</div>
				<div class="input">
					<input @blur="scrollTop" type="tel" maxlength="6" :disabled="!enableModifyEmail" v-model="randCode" :placeholder="$t('apply-key55')">
					<div class="send">
						<a href="javascript:;" v-if="seconds===60" @click="sendSms">{{$t('apply-key56')}}</a>
						<span v-else>{{seconds}}(s)</span>
					</div>
				</div>
			</div>
			<!-- Whatsapp(非洲版特有) -->
			<div class="item" v-if="isNi">
				<div class="label">WhatsApp Account</div>
				<div class="input">
					<input @blur="scrollTop" type="text" v-model="whatsapp" placeholder="Your WhatsApp Account">
				</div>
			</div>
			<!-- 宣传用社交媒体 (可多选) -->
			<div class="item">
				<div class="label">{{$t('apply-key57')}}</div>
				<div class="input" style="height:auto;min-height:0.8rem;" @click="mediaShown=true;">
					<div class="list">
						<li v-for="item in medias" :key="item.code" @click.stop="stop">
							{{item.name}}<span class="close" @click.stop="deleteMedia(item.code)"></span>
						</li>
					</div>
					<span class="arrow"></span>
				</div>
			</div>
			<!-- 邮箱 (用于接收审核结果） -->
			<div class="item">
				<div class="label" v-if="locale==='ja'" style="margin-bottom: 0.08rem;">{{$t('apply-key580')}}</div>
				<div class="label" v-if="locale!='en'">{{$t('apply-key58')}}</div>
				<div class="label" style="margin-bottom:0.08rem;" v-if="locale==='en'">{{$t('apply-key58')}}</div>
				<div class="label" v-if="locale==='en'">{{$t('apply-key588')}}</div>
				<div class="input">
					<input @blur="scrollTop" type="text" style="width:100%" v-model="mediaLink" :placeholder="$t('apply-key59')">
				</div>
			</div>
			<!-- 宣传计划 (选填，填写将提升您的通过率） -->
			<div class="item">
				<div class="label" v-if="locale === 'zh'">{{$t('apply-key60')}}</div>

				<div class="label" style="margin-bottom:0.08rem;" v-if="locale === 'ja'">{{$t('apply-key60')}}</div>
				<div class="label" v-if="locale === 'ja'">{{$t('apply-key601')}}</div>

				<div class="label" style="margin-bottom:0.08rem;" v-if="locale === 'en'">{{$t('apply-key60')}}</div>
				<div class="label" v-if="locale === 'en'">{{$t('apply-key600')}}</div>
				<div class="input" style="height:auto;min-height:2rem;">
					<textarea @blur="scrollTop" v-model="remarks" :placeholder="$t('apply-key61')" style="min-height:2rem;"></textarea>
				</div>
			</div>
			<!-- 同意《Deepcoin代理协议》 -->
			<div class="check">
				<van-checkbox :value="checked" shape="square" class="ch" @click="onChange">{{$t('apply-key62')}}</van-checkbox>
				<div class="agreement" @click="goAgreement">{{$t('apply-key63')}}</div>
			</div>
			<!-- 同意按钮 -->
			<van-button @click="upload" :loading="loading" :class="{on:btnStatus,off:!btnStatus}" hairline class="btn" type="primary">{{$t('apply-key64')}}</van-button>
		</div>
		<!-- 申请成功弹窗 -->
		<div class="mark" v-if="successDialog">
			<div class="box">
				<h1><img src="../../static/images/apply-success.png"></h1>
				<h2>{{$t('apply-key65')}}</h2>
				<p>{{$t('apply-key66')}}</p>
				<p>{{$t('apply-key67')}}</p>
				<div class="btn" @click.stop="goHome">{{$t('apply-key68')}}</div>
			</div>
		</div>
		<!-- 国家选择 -->
		<van-action-sheet 
			class="iconBox" 
			:class="{isIphoneX:isIphoneX,'theme-dark':themeIndex==1}"
			v-model="countryShown" 
			:actions="countryList" 
			:cancel-text="$t('cancel')" 
			@select="selectCountry"
		/>
		<!-- 宣传社交媒体 -->
		<van-action-sheet 
			class="iconBox" 
			:class="{isIphoneX:isIphoneX,'theme-dark':themeIndex==1}"
			v-model="mediaShown" 
			:actions="mediaList" 
			:cancel-text="$t('cancel')" 
			@select="selectMedia"
		/>
	</div>
</template>
<script src="./apply.js"></script>
<style scoped lang="scss">
	@import './apply.scss';
</style>
<style lang="scss">
	.iconBox.theme-dark{
		.van-action-sheet__gap{
			background:#000;
		}
		button{
			position: relative;
			&::after{
				content: '';
				position:absolute;
				right:0;
				left:0;
				bottom:0;
				height: 1px;
				background:rgba(255, 255, 255, .1);
				transform: scaleY(0.5);
			}
		}
		.van-action-sheet__item,.van-action-sheet__cancel{
			background: #242424;
			color: #c1c1c1;
		}
		.van-action-sheet__item.van-action-sheet__item--disabled{
			span{
				opacity: 0.3;
			}
		}
	}
	.van-checkbox__label{
		color:#6D7B8F;
	}
	.van-checkbox__icon{
		width: 0.28rem;
		height: 0.28rem;
		font-size:0.25rem;
		border-radius: 2px;
		.van-icon-success{
			width:0.28rem;
			height:0.28rem;
		}
	}
</style>